<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath %>">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
    <style>
        .layui-table th{
           font-size: 15px;
            background-color: transparent !important;
        }
        .layui-table {
            background-color: transparent !important;
        }
    </style>
</head>
<body>
<div>
    <div  style="padding-left: 80px;margin-top: 20px">
        <button class="layui-btn" style="float: right;margin-right: 50%" data-type="reload" id="sousuo">搜索</button>
        <div class="layui-inline" style="text-align: center;float:right">
            <input class="layui-input" name="keyword" placeholder="搜索项目" id="demoReload" autocomplete="off">
        </div>
    </div>
    <div style="width: 1180px">
    <table  class="layui-table" style="background-color:transparent;font-size:18px" id="test1" lay-filter="demo"></table>
    <div id="pager" style="margin-left: 100px;font-size: 18px"></div>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-sm" style="font-size:12px" lay-event="downLine">下线</a>
    <a class="layui-btn layui-btn-sm" lay-event="detail" style="font-size:12px">项目详情</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" style="font-size:12px" lay-event="reserve">预投列表</a>
</script>


<script src="js/layui/layui.js" charset="utf-8"></script>
<script>

    layui.use(['table' ,'laypage'], function(){
        var table = layui.table;
        var $ = layui.$;

        table.render({
            elem: '#test1'
            ,height: 500
            ,weight:500
            ,size:'lg'
            ,url: 'item/onlineItem' //数据接口  请求自动拼接参数page=1&limit=10
            , limit: 10 //每页显示条数
            ,cols: [[ //表头
                 // {type:'checkbox', fixed: 'left'}
                {field: 'id', title: 'ID',width:80,style:"font-size:15px", sort: true,align:'center'}
                ,{field: 'title', title: '项目名称' ,style:"font-size:15px",  width:200}
                ,{field: 'userNicename', title: '发起人',style:"font-size:15px", align:'center',  width:150}
                ,{field: 'mobile', title: '联系电话',style:"font-size:15px",align:'center', width:180}
                ,{field: 'beginTime', title: '上线时间',style:"font-size:15px",align:'center', width: 210}
                ,{field: 'right', title: '操作',style:"font-size:15px",  width:350, align:'center', toolbar: '#barDemo'}

            ]]
            ,page:true//开启分页
        });
        // $('#pager').css('margin-left', '100px');
        $('.layui-table-page').css('margin-left', '300px');// 分页右对齐

      //  监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){//项目详情
                layer.open({
                    title: false,//弹出层的title不显示
                    type: 2,
                    area: ['80%', '400px'],
                    content: 'item/toItemDetail?id=' + data.id
                });
            } else if(obj.event === 'reserve'){//预投项目
                layer.open({
                    title: false,//弹出层的title不显示
                    type: 2,
                    area: ['70%', '800px'],
                    content: 'reserve/toReserve?itemId=' + data.id
                });
            } else if(obj.event === 'downLine'){
                    layer.confirm("确定下线项目？",function (index) {
                        $.ajax({
                            url:"item/updItemStatus?",
                            data:{"status":"0","id":data.id},
                            dataType:"json",
                            method:"get",
                            success:function (res) {
                                if(res.statusCode==300){
                                    layer.alert("上线失败")
                                }
                            }
                        })
                        layer.close(index);
                        table.reload("test1",{
                            page: {
                                curr: 1  //重载后显示页码
                            }
                        });
                    })
            }
        });


        //搜索按钮事件
        $('#sousuo').on('click',function () {
            var inputVal = $('.layui-input').val();//获取input输入内容
            //表格重载
            table.reload('test1', {
                where: {
                    title : inputVal  //携带参数 或变更参数
                }
                ,page: {
                    curr: 1  //重载后显示页码
                }
            })
        });
    })

</script>

</body>
</html>